<template>
  <div class="table-box">
    <ProTable
      ref="proTableBox"
      :request-api="funcMenuFindBySystem"
      :columns="dataGrid.columns"
      :pagination="false"
      :request-auto="false"
      :data-callback="dataCallBack"
      :init-param="dataGrid.initParam"
      @cell-click="cellClick"
    >
      <template #tableHeader>
        <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
      </template>

      <template v-for="item in requiredField" :key="item.prop" #[`${item.prop}Header`]="scope">
        <SvgIcon name="svg-require" class="table-svg-require" v-if="isAddFlag"></SvgIcon>
        {{ scope.column.label }}
      </template>

      <template #operation="{ row }">
        <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
      </template>
    </ProTable>

    <mDrawer :visible="true">
      <template #content>
        <el-tabs v-model="drawerData.activeName" class="self-adaption-tabs">
          <el-tab-pane label="明细" name="detail">
            <ProTable
              ref="detailRef"
              :request-auto="false"
              :columns="detailData.columns"
              :data="detailData.data"
              :init-param="detailData.initParam"
              :pagination="false"
            >
              <template #tableHeader>
                <GlobalButton :button-list="detailData.headButtonList"></GlobalButton>
              </template>

              <template v-for="item in detailRequiredField" :key="item.prop" #[`${item.prop}Header`]="scope">
                <SvgIcon name="svg-require" class="table-svg-require" v-if="detailFlag"></SvgIcon>
                {{ scope.column.label }}
              </template>

              <template #operation="{ row }">
                <GlobalButton :button-list="detailData.rowButtonList" :row-params="row"></GlobalButton>
              </template>
            </ProTable>
          </el-tab-pane>
        </el-tabs>
      </template>
    </mDrawer>
  </div>
</template>

<script setup lang="ts">
import { ProTableInstance } from "@/components/ProTable/interface";

import { funcMenuFindBySystem } from "$api/auth/funMenu";

import { useDataGrid } from "./hooks/use-dataGrid";

const { drawerData } = useDrawerData(() => null, "detail");

const proTableBox = ref<ProTableInstance>();
const detailRef = ref<ProTableInstance>();

const {
  dataGrid: detailData,
  isAddFlag: detailFlag,
  requiredField: detailRequiredField
} = useDataGrid(proTableBox, null, null, detailRef);
const { dataGrid, isAddFlag, requiredField, dataCallBack, cellClick } = useDataGrid(proTableBox, drawerData, detailData);
</script>
